<template>
  <div class="app-container">
    <!-- <div style="font-size: 20px; margin-bottom: 50px; text-align: center">
      <span>CMSAutoCreate终端</span>
      <el-divider></el-divider>
      <span>{{ tipMessage }}</span>
    </div> -->
    <el-row class="header-nav">
      <el-col class="header-nav-left"
              :span="12">
        <img src="static/img/newLogo.png" />
        <!-- <div class="newLogo"></div> -->
      </el-col>
      <el-col class="header-nav-right"
              :span="12">
        <span>{{title}}</span>
      </el-col>
    </el-row>
    <el-row class="main-section"
            :gutter="30">
      <!-- 身份证信息 -->
      <el-col class="main-section-left-box"
              :span="10">
        <div class="left-box-mession">
          <!-- gate-out-auto, gate-out-manual no show tips -->
          <span v-if="GSAConstants().TOPIC_PREADVICE_GATE_OUT_CHECK.ic ===  $props.ic || GSAConstants().TOPIC_PREADVICE_MANUAL_OUT.ic ===  $props.ic">

          </span>
          <span v-else>
            预申报后自动刷卡取飞(交柜请提前验箱)
          </span>
        </div>
        <div class="left-box-center">
          <img src="static/img/swipe.png" />
        </div>
      </el-col>
      <el-col class="main-section-right-box"
              :span="14">

        <!-- PCC卡信息 -->
        <div class="main-padding">
          <div class="bbox">
            <div class="clearfix bt">
              <p>PCC卡信息</p>
            </div>
            <el-form ref="form"
                     class="elForm"
                     :model="form"
                     label-width="120px">
              <el-form-item label="PCC卡号">
                <el-input v-model="form.permitNo"
                          disabled></el-input>
              </el-form-item>

              <el-form-item label="车牌号">
                <el-input v-model="form.tractorNo"
                          disabled></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="right-box">
            <img v-if="showMessage.type === 'error' || showMessage.type === 'warning'"
                 style="float: left"
                 class="infoMsg"
                 src="static/img/info2.png" />
            <img v-else-if="showMessage.type === 'green'"
                 style="float: left"
                 class="infoMsg"
                 src="static/img/info3.png" />
            <img v-else
                 src="static/img/info1.png"
                 class="infoMsg"
                 style="float: left" />
            <div class="left-box-center2-mession">
              <span v-bind:class="'color-' + showMessage.type">
                {{showMessage.msg}}
              </span>
            </div>
          </div>
        </div>
      </el-col>

      <el-col class="main-section-bottom-box"
              :span="24">
        <!-- <img src="static/img/backdown2.gif" alt=""> -->
        <div v-if="GSAConstants().TOPIC_VERIFY_CARD.ic !== $props.ic"
             class="bottom-box-title">
          <svg-icon iconClass="tips"
                    style="margin:0 5%" />
          注意事项
        </div>
        <div class="bottom-box-tips">
          <!-- {{showMessage.tips}} -->
          <div style="padding: 20px"
               v-if="GSAConstants().TOPIC_VERIFY_CARD.ic !== $props.ic">
            <h3>
              箱的放行信息将被写到您的IC卡中，
              刷卡成功后请取回您的卡并到电子闸处读卡
            </h3>
          </div>
          <div v-if="GSAConstants().TOPIC_PREADVICE_MANUAL_OUT.ic === $props.ic"
               class="card-button">
            <!-- 读89扇区的卡信息 -->
            <el-button class="card-btn"
                       :disabled="!readCardPermission"
                       @click="readCard">读卡</el-button>
          </div>

          <!-- 读ic卡号 -->
          <div v-if="GSAConstants().TOPIC_VERIFY_CARD.ic === $props.ic"
               class="card-button">
            <el-button class="card-btn"
                       @click="readInfoCard('ic')">卡校验</el-button>
            <el-button class="card-btn"
                       @click="logout">返回</el-button>
          </div>

        </div>
      </el-col>
    </el-row>

    <ShowCardDialog ref="showCardDialog"></ShowCardDialog>
  </div>
</template>
<script>
import {
  showErrorMsg,
  log
} from '@/utils/message'
import ShowCardDialog from '@/views/card/cms-v2/show-card-dialog'
import { GSAConstants } from '@/utils/access'
import { getIcErrorMessage } from '@/utils/error-card-message.js'
export default {
  components: { ShowCardDialog },
  props: {
    ic: {
      type: String,
      default: function () {
        return ''
      }
    },
    title: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      readCardPermission: false,
      GSAConstants: GSAConstants,
      idThread: null,
      icThread: null,
      showMessage: {
        msg: '请刷卡......',
        success: false,
        type: 'success',
        mession: '您的交柜未进行PAS申报(验箱的箱号未进行PAS申报)，请核查PAS申报资料',
        tips: '请不要在飞仔未打印完毕时拉扯飞仔纸,以免导致卡纸'
      },
      form: {
        name: '',
        idNo: '',
        saltIdNo: '',
        saltName: '',
        tractorNo: '',
        pccId: '',
        permitNo: '',
      }
    }
  },
  created () {

  },
  mounted () {
    const menus = this.$store.getters.menus
    this.readCardPermission = false
    menus.forEach(menu => {
      const rightId = menu.key.rightId.trim()
      if (rightId === 'GateOut_ReadCard') {
        this.readCardPermission = true
      }
    })
  },
  methods: {
    showMsg (dt) {
      this.showMessage.msg = dt.msg
      this.showMessage.type = dt.type
    },
    readCard () {
      this.$emit('showCard89Info')

    },
    // 读卡的反馈结果处理函数
    readIcReply (res) {
      if (GSAConstants().TOPIC_VERIFY_CARD.ic !== this.$props.ic) {
        return
      }

      if (res.readCode === 1) {
        // 还要验证车牌号， 这里就不做提示
        return
      }

      this.showMsg({
        msg: getIcErrorMessage(res.readCode),
        type: 'error'
      })
      this.$emit('handleSuccess')
    },
    getCarNumberReply (messageObject) {
      if (GSAConstants().TOPIC_VERIFY_CARD.ic !== this.$props.ic) {
        return
      }
      if (messageObject.rc && messageObject.rc === 1 && messageObject.dt.cardId === this.form.pccId) {
        this.showMsg({
          msg: '此卡为有效卡',
          type: 'green'
        })
      } else {
        this.showMsg({
          msg: '此卡为无效卡',
          type: 'error'
        })
      }
      this.$emit('handleSuccess')
    },
    showCardInfo89Dialog (info) {
      this.$refs.showCardDialog.show(info)
    },
    setForm (form) {
      this.form = { ...this.form, ...form }
    },
    // 读ID成功
    readIcCardSuccess () {
      log('读PCC卡成功， 关闭读卡线程')
      if (this.icThread) {
        clearInterval(this.icThread)
      }
      this.hasPccCard = true
    },
    // 读ID成功
    readIdCardSuccess () {
      log('读ID卡成功， 关闭读卡线程')
      if (this.idThread) {
        clearInterval(this.idThread)
      }
    },
    readInfoCard (type) {
      let count = 1;
      const readCardInterval = setInterval(() => {
        log('开始尝试读卡', type, '尝试次数', count)
        this.$emit('readCard', type)
        count++

        if (count > 3) {
          log('关闭读卡，', type, '尝试次数', count)
          // if (type === 'ic') {
          //   showErrorMsg('PCC卡读取失败，请重新刷卡')
          // } else {
          //   showErrorMsg('身份证读取失败，请重新刷身份证')
          // }
          clearInterval(readCardInterval)
        }
      }, 1000)


      // 防止用户多次频繁点击读卡的逻辑， 关闭上一次读卡线程
      if (type === 'ic') {
        // 关闭之前的读卡线程， 因为重新开了一个
        if (this.icThread) {
          clearInterval(this.icThread)
        }
        this.icThread = readCardInterval
      } else {
        // 关闭之前的读卡线程， 因为重新开了一个
        if (this.idThread) {
          clearInterval(this.idThread)
        }
        this.idThread = readCardInterval
      }
    },
    // 手动触发提交的方法
    submit () {
      // let message = {
      //   dt: this.form,
      //   ic: this.$props.ic,
      //   en: false
      // }
      // log('执行代码 this.$emit(customSentMqttMsg, this.$props.url, message)', this.$props.url, message)
      // this.$emit('customSentMqttMsg', this.$props.url, message)

      this.submitCustomerUrl(this.$props.url, this.$props.ic, this.form)
    },
    // 手动触发提交的方法
    submitCustomerUrl (url, ic, qd) {
      if (!qd.handlerType) {
        qd.handlerType = 'checkCard'
      }
      let message = {
        dt: qd,
        ic: ic,
        en: false
      }
      log('执行代码 this.$emit(customSentMqttMsg, this.$props.url, message)', ic, message)
      this.$emit('customSentMqttMsg', url, message)
    },
    logout () {
      this.$emit('logout')
    }
  },
}
</script>

<style scoped>
.line {
  text-align: center;
}

.app-container {
  padding: 0px;
}

.card-btn {
  font-size: 18px;
  color: #213767;
  font-weight: bold;
}
.header-nav {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  background: linear-gradient(180deg, #f7fbff 0%, #ebf0ff 100%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #b0b9ce;
}
.header-nav > .header-nav-left {
  cursor: pointer;
}
.header-nav > .header-nav-left > img {
  height: 35px;
  margin-top: 5px;
}
.header-nav > .header-nav-right {
  height: 100%;
  padding-top: 7.5px;
  /* display:flex; */
  text-align: right;
  align-items: center;
}
.header-nav > .header-nav-right > span {
  font-size: 17px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #213767;
  line-height: 26px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}

.main-section {
  width: 100%;
  background: url("/static/img/bg.png");
  height: calc(100vh - 45px);
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 25px;
}

.main-section-right-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 56%;
  padding-top: 30px;
  height: 68%;
  float: right;
  padding: 5%;
  line-height: 40px;
  flex-direction: column;
  display: flex;
  padding: 2%;
  justify-content: space-between;
}

div >>> .el-form-item__label {
  font-size: 18px;
  color: #213767;
  font-weight: bold;
}
.right-box {
  padding: 20px;
  background: #fff;
  width: 100%;
  height: 165px;
  /* height:220px; */
  margin-top: 5%;
  border-radius: 8px;
  padding-top: 25px;
  padding-right: 25px;
  overflow: hidden;
}

.right-box .infoMsg {
  height: 70px;
  width: 70px;
}
.right-box p {
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #e5e2e2;
  line-height: 20px;
  margin: 2%;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.main-section-left-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 68%;
  float: left;
  display: flex;
  padding-top: 10px;
  align-items: center;
  flex-direction: column;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
  justify-content: space-evenly;
}

.main-padding {
  height: 400px;
}
.left-box-mession {
  font-size: 12px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  text-align: center;
  height: 18px;
}
.left-box-center {
  width: 90%;
  height: 50%;
  position: relative;
  background: url("/static/img/bg2.png");
  border-radius: 15px;
  margin-top: 10%;
  padding-left: 15px;
  margin-bottom: 10%;
  /* left: 20px; */
  background-size: 100% 100%;
  float: left;
}

.smile {
  width: 90px;
  height: 80%;
  margin: 10px;
  background: url("/static/img/smile.png");
  background-size: 130px 125px;
}

.right-box >>> img {
  width: 100px;
  height: 100px;
  margin-top: 20px;
}

.swipe {
  /* width: 180px; */
  height: 80%;
  margin: 10px;
  margin-top: 60px;
  background: url("/static/img/swipe.png") no-repeat center;
  background-size: 240px 140px;
}
.left-box-center2 {
  width: 90%;
  height: 40%;
  position: relative;
  background: url("/static/img/bg3.png");
  border-radius: 15px;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}
.left-box-center2 > img {
  height: 50%;
  margin-right: 5%;
}
.left-box-center2-mession {
  font-size: 21px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #196cc8;
  display: flex;
  margin-top: 30px;
  float: left;
  margin-left: 16px;
  max-width: 330px;
  align-items: center;
}
.left-box-center > img {
  position: absolute;
  width: 25%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main-section-bottom-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bottom-box-title {
  background: #fff;
  width: 15%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3d89e7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.bottom-box-tips {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
}

.main-section-bottom-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  margin-top: 3%;
  padding: 20px;
  font-size: 15px;
}

.bottom-box-title {
  background: #fff;
  width: 15%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3d89e7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.color-c {
  color: green;
}
.color-error {
  color: blue;
}
.color-blue {
  color: blue;
}
.bbox >>> .elForm {
  padding: 7px;
  background-color: #fff;
  border-radius: 5px;
  height: 140px;
  padding: 20px;
}
.bt {
  color: #fff;
}
.bottom-box-tips {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
}
</style>
